<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/product.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2120931_a9st60mdhhn.css">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=T8KmzjU6DHeBbXDfpM5QOaTXS90lwwYk"></script>
</head>

<body>
    <header>
        <div class="tele">
            <div class="container">
                <span class="teleNum">全国服务热线:400-0000-0000</span>
                <div class="right">
                    <a href="#">设为首页</a>
                    <a href="#">加入收藏</a>
                </div>
            </div>
        </div>
        <div class="head">
            <div class="content">
                <div class="logo">
                    <div style="height: 100%;">
                        tk科技有限公司
                        <div style="font-size: 0.8em;">13213232</div>
                    </div>
                </div>
                <div class="menu">
                    <ul>
                        <li class="active">
                            <div>
                                首页
                            </div>
                            <div>
                                home
                            </div>
                        </li>
                        <li>
                            <div>
                                关于我们
                            </div>
                            <div>
                                about
                            </div>
                        </li>
                        <li>
                            <div>
                                产品
                            </div>
                            <div>
                                product
                            </div>
                        </li>
                        <li>
                            <div>
                                服务支持
                            </div>
                            <div>
                                service
                            </div>
                        </li>
                        <li>
                            <div>
                                新闻中心
                            </div>
                            <div>
                                news
                            </div>
                        </li>
                        <li>
                            <div>
                                在线商店
                            </div>
                            <div>
                                shop
                            </div>
                        </li>
                        <li>
                            <div>
                                联系我们
                            </div>
                            <div>
                                contact us
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <div class="index-banner">
        <div class="indicator">
            <div class="items active"></div>
            <div class="items"></div>
            <div class="items"></div>
            <div class="items"></div>
        </div>
    </div>
    <div class="product-mes">
        <div class="product-items">
            <div class="head">
                <!-- <div>111</div> -->
                <img src="./img/index/write.png" alt="" style="flex-shrink: 1;">
                <span style="flex-shrink: 2;">新闻中心</span>
                <div style="flex-shrink: 1;">NEW CENTER</div>
            </div>
            <div class="content">
                <div class="center">
                    <h3>CeBIT</h3>
                    <div class="con">
                        <img src="./img/index/write-pic.png" alt="">
                        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </div>
            </div>
            <ul class="bottom">
                <li>内容内容内容内容内容内容</li>
                <li>内容内容内容内容内容内容</li>
                <li>内容内容内容内容内容内容</li>
            </ul>
        </div>
        <div class="product-items">
            <div class="head">
                <!-- <div>111</div> -->
                <img src="./img/index/like.png" alt="" style="flex-shrink: 1;">
                <span style="flex-shrink: 2;">新品发布</span>
                <div style="flex-shrink: 1;">NEW CENTER</div>
            </div>
            <div class="content">
                <i class="icon iconfont icon-left"></i>
                <img src="./img/index/like-pic.png" alt="">
                <i class="icon iconfont icon-xiangyou"></i>
            </div>
            <div style="color: #2496cd;width: 100%;text-align: center;padding-bottom: 20px;">111</div>
            <div style="color: #000;width: 100%;text-align: center;">222</div>
        </div>
        <div class="product-items">
            <div class="head">
                <!-- <div>111</div> -->
                <img src="./img/index/right.png" alt="" style="flex-shrink: 1;">
                <span style="flex-shrink: 2;">品牌介绍</span>
                <div style="flex-shrink: 1;">NEW CENTER</div>
            </div>
            <div class="content">
                <img src="./img/index/right-pic.png" alt="">
            </div>
            <div class="word">
                <div class="mark first">“</div>
                <div class="desc">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
                <div class="mark second">”</div>
            </div>
        </div>

    </div>
    <div class="aboutus">
        <div class="title">
            <div class="main-title">关于我们</div>
            <div class="sub-title">
                <!-- <div class="line"></div> -->
                story display
            </div>
        </div>
        <div class="introdution">
            <div class="word">
                内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容
                内容内容内容内容内容内容内容内容内容内容内容内容
            </div>
            <div class="slider">
                <img src="./img/index/bottom-slider.png" alt="">
                <img src="./img/index/bottom-slider.png" alt="">
                <img src="./img/index/bottom-slider.png" alt="">
                <img src="./img/index/bottom-slider.png" alt="">
                <img src="./img/index/bottom-slider.png" alt="">
                <img src="./img/index/bottom-slider.png" alt="">
            </div>
        </div>
    </div>
    <div class="contactus">
        <div class="title-con">
            <div class="title">
                <div class="main-title">联系我们</div>
                <div class="sub-title">
                    <!-- <div class="line"></div> -->
                    story display
                </div>
            </div>
        </div>
        <div class="mes">
            <div class="left">
                <div class="qrcode-mes">
                    <div class="qrcode">
                        <img src="./img/index/qrcode.png" alt="">
                        <p>微信扫一扫</p>
                        <p>关注我们相关信息</p>
                    </div>
                    <div class="mes-data">
                        <div>
                            <i class="icon iconfont icon-dianhua"></i>
                            服务热线:400-000-4000
                        </div>
                        <div>
                            <i class="icon iconfont icon-ren-"></i>
                            联&nbsp;&nbsp;系&nbsp;&nbsp;人:400-000-4000
                        </div>
                        <div>
                            <i class="icon iconfont icon-youzhengfuwu"></i>
                            公司邮箱:400-000-4000
                        </div>
                        <div>
                            <i class="icon iconfont icon-chuanzhen"></i>
                            公司传真:400-000-4000
                        </div>
                        <div>
                            <i class="icon iconfont icon-youxiang"></i>
                            邮政编码:400-000-4000
                        </div>
                        <div>
                            <i class="icon iconfont icon-dizhi"></i>
                            公司地址:400-000-4000
                        </div>
                    </div>
                </div>
                <div class="map">
                    <!-- <img src="./img/index/map.png" alt=""> -->
                    <div id="container"></div>
                </div>
            </div>
            <div class="right">
                <form action="">
                    <label for="nickname">昵称</label>
                    <input type="text" name="" id="nickname">
                    <label for="tele">联系电话</label>
                    <input type="text" name="" id="tele">
                    <label for="email">电子邮箱</label>
                    <input type="text" name="" id="email">
                    <label for="mesContent">内容</label>
                    <textarea name="" id="mesContent"></textarea>
                    <button>提交</button>
                </form>
            </div>
        </div>
    </div>
    <footer>
        <div class="contact">
            <div class="follow">
                关注我们：
                <i class="icon iconfont icon-weibo"></i>
                <i class="icon iconfont icon-weixin"></i>
                <i class="icon iconfont icon-QQ"></i>
            </div>
            <ul>
                <li>网站首页</li>
                <li>网站首页</li>
                <li>网站首页</li>
                <li>网站首页</li>
                <li>网站首页</li>
                <li>网站首页</li>
            </ul>
        </div>
    </footer>
    <div class="copyright">
        &copy; TK有限公司TK有限公司TK有限公司TK有限公司TK有限公司TK有限公司TK有限公司TK有限公司
    </div>
    <div class="map1">

    </div>
</body>
<script>
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(113.328415, 23.130159)
    map.centerAndZoom(point, 18);
    var marker1 = new BMapGL.Marker(point);
    map.addOverlay(marker1)
    // var opts = {
    //     position: point, // 指定文本标注所在的地理位置
    //     offset: new BMapGL.Size(0, 0) // 设置文本偏移量
    // };
    // 创建文本标注对象
    // var label = new BMapGL.Label('<i class="icon iconfont icon-dizhi"></i>', opts);
    // // 自定义文本标注样式
    // label.setStyle({
    //     color: 'pink',
    //     border:'none',
    //     backgroundColor:'transparent',
    //     fontSize:'40px',
    //     fontFamily: '微软雅黑'
    // });
    // map.addOverlay(label);
</script>

</html>